<template>
  <GiTable
      row-key="id"
      :data="dataList"
      :columns="columns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 600 }"
      :pagination="pagination"
      :disabled-tools="['refresh','size', 'setting', 'fullscreen']"
      :disabled-column-keys="['id']"
      :selected-keys="selectedKeys"
      @select="select"
      @select-all="selectAll"
      @refresh="reset"
  >
    <template #toolbar-left>
      <a-select
          v-model="queryForm.notes"
          :options="channel_type"
          placeholder="请选择渠道"
          allow-clear
          style="width: 150px"
          @change="search"
      />

      <a-button @click="reset">
        <template #icon>
          <icon-refresh/>
        </template>
        <template #default>重置</template>
      </a-button>
    </template>
    <template #toolbar-right>
      <a-button v-permission="['musician:musicianBind:export']" @click="onExport">
        <template #icon>
          <icon-download/>
        </template>
        <template #default>导出</template>
      </a-button>
    </template>

    <template #platform="{ record }">
      <GiCellTag :value="record.notes" :dict="channel_type"/>
    </template>

    <template #action="{ record }">
      <a-space>
        <a-link v-permission="['musician:musicianBind:get']" title="详情" @click="onDetail(record)">详情</a-link>
      </a-space>
      <a-link
          v-permission="['musician:musicianBind:delete']"
          status="danger"
          :disabled="record.disabled"
          :title="record.disabled ? '不可删除' : '删除'"
          @click="onDelete(record)"
      >
        删除
      </a-link>
    </template>

  </GiTable>

  <MusicianBindDetailDrawer ref="MusicianBindDetailDrawerRef"/>
</template>

<script lang='tsx' setup>
import type {TableInstance} from '@arco-design/web-vue'

const {channel_type} = useDict('channel_type')


import {useDownload, useResetReactive, useTable} from '@/hooks'
import {isMobile} from '@/utils'
import {
  deleteMusicianBind, exportMusicianBind, MusicianBindPageQuery,
} from '@/apis/musician/musicianBind'
import {
  type MusicianBindQuery,
  getMusicianBindByUserId, MusicianBindResp,
} from '@/apis/musician/musicianBind'
import MusicianBindDetailDrawer from "@/views/settlement/earnings/components/MusicianBindDetailDrawer.vue";
import {useDict} from "@/hooks/app";


const props = withDefaults(defineProps<Props>(), {
  userId: '',
})

interface Props {
  userId: string
}

const [queryForm, resetForm] = useResetReactive<MusicianBindPageQuery>({
  notes: '',
  userName: props.userId,
  createUser: props.userId,
  sort: ['artist,asc']
})

const {
  tableData: dataList,
  loading,
  pagination,
  search,
  selectedKeys,
  select,
  selectAll,
  handleDelete,
} = useTable((page) => getMusicianBindByUserId(props.userId, {...queryForm, ...page}), {immediate: false})
// } = useTable((page) => getMusicianBindByUserId(props.userId, {...queryForm, ...page}), {immediate: false})

const columns: TableInstance['columns'] = [
  {
    title: '序号',
    width: 75,
    align: 'center',
    render: ({rowIndex}) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
    fixed: !isMobile() ? 'left' : undefined,
  },
  {
    title: '艺人', align: 'center', dataIndex: 'artist', slotName: 'artist', sortable: {
      sortDirections: ['ascend', 'descend'],
    }
  },
  {title: '渠道', align: 'center', dataIndex: 'notes', slotName: 'notes', sortable: {
      sortDirections: ['ascend', 'descend'],
    }},
  {title: '绑定时间', align: 'center', dataIndex: 'createTime', slotName: 'createTime'},
  {
    title: '操作',
    dataIndex: 'action',
    slotName: 'action',
    width: 160,
    align: 'center',
    fixed: !isMobile() ? 'right' : undefined,
  }
]

// 重置
const reset = () => {
  resetForm()
  search()
}

// // 删除
// const onDelete = (record: SalaryLogResp) => {
//   return handleDelete(() => deleteSalaryLog(record.id), {
//     content: `是否确定删除该条数据？`,
//     showModal: true
//   })
// }


const SalaryLogAddModalRef = ref<InstanceType<typeof SalaryLogAddModal>>()
// 新增
// const onAdd = () => {
//   SalaryLogAddModalRef.value?.onAdd()
// }

// 修改

const MusicianBindDetailDrawerRef = ref<InstanceType<typeof MusicianBindDetailDrawer>>()
// 详情
const onDetail = (record: MusicianBindResp) => {
  MusicianBindDetailDrawerRef.value?.onOpen(record.id)
}

// 导出
const onExport = () => {
  useDownload(() => exportMusicianBind(queryForm))
}

// 删除
const onDelete = (record: MusicianBindResp) => {
  return handleDelete(() => deleteMusicianBind(record.id), {
    content: `是否确定删除该条数据？`,
    showModal: true
  })
}

// 监听 userId 的变化
watch(
    () => props.userId,
    async (newUserId) => {
      if (newUserId) {
        search()
        queryForm.userName = newUserId
        queryForm.createUser = newUserId
      }
    },
    {immediate: true},
)
</script>

<style scoped lang="scss"></style>
